// -----------  1.饼图 ------------------
function pieChart() {
  let myChart = echarts.init($('.pie')[0]) //$('.pie') 是JQuery对象：加[0]把它转为DOM对象
  var option = {
    //标题
    title: {
      text: '籍贯 Hometown',
      textStyle:{
        color: '#6d767e'
      }
    },
    //鼠标移入的提示
    tooltip:{
      // {a} 是 series[0].name  系列名称
      // {b} 是 series[0].data.name 每一项的名称
      // {c} 是 数值
      // {d} 是 百分比
      formatter:'{a} <br/> -- {b} <strong>{c}</strong>人 占比{d}%'
    },
    series: [
      {
        name: '各地人员分布', //和提示有关系
        type: 'pie', // 表示这个是一个饼图，line表示折线图，bar表示柱状图
        radius: ['10%', '60%'], //内圈的半径，和外圈的半径
        center: ['50%', '50%'], //圆形点坐标
        //怎样表示数据，可选值 area , radius
        //area 使用半径的长短表示数据的大小，每个扇形的圆心角相同
        //radius 使用半径的长短表示数据的大小，每个扇形的圆心角表示百分比
        roseType: 'area',
        // itemStyle 每一项的样式
        itemStyle: {
          borderRadius: 4,
        },
        data: [
          { value: 40, name: '河北省' },
          { value: 38, name: '山东省' },
          { value: 32, name: '河南省' },
          { value: 30, name: '山西省' },
          { value: 28, name: '内蒙古' },
          { value: 26, name: '辽宁省' },
          { value: 22, name: '吉林省' },
          { value: 18, name: '黑龙江' },
        ],
      },
    ],
  }
  myChart.setOption(option)
}

pieChart()
// -----------  2.折线图 ------------------
function lineChart() {
  let myChart = echarts.init($('.line')[0]);

 var option = {
    //图例
    legend:{
      top:20
    },
    //鼠标移入的提示
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    //标题
    title: {
      text: '薪资  Salary',
      textStyle:{
        color:'#6d767e'
      }
    },
    //X轴设置
    xAxis: {
      type: 'category',
      boundaryGap: false, //坐标轴两侧的留白策略，false表示不留白
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    // Y轴 
    yAxis: {
      type: 'value',
      //我们目前的数据，最大值是17000
      //坐标轴最大值 = 数据最大值 + 数据最大值 * 50%
      boundaryGap: [0, '50%'] // Y轴方向上，坐标轴延伸的值
    },
    //数据缩放组件 (三种类型，通过type来指定类型)
    // type : inside (内部，数据缩放组件集成到了X轴上，通过鼠标滚轮来缩放)
    // type: select (选择、配合工具箱使用，通过工具选框来进行缩放)
    // type: slider(滑块，单独出现一个滑块，通过滑块进行数据的缩放) -- 默认
    dataZoom: [
      {
        type: 'inside', // 这里没有type，默认是slider 类型
        start: 0, // 起始点 百分比
        end: 10 // 结束点  百分比
      },
      {
        start: 0,
        end: 10
      }
    ],
    //系列数据
    series: [
      {
        name: '期望薪资',
        type: 'line', // 表示折线图
        smooth:true, //使用平滑曲线
        symbol: 'none', // 表示线上的标志
        //每一项的样式
        itemStyle: {
          color: '#ee6666'
        },
        //折现使用的数据
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
          {
        name: '实际薪资',
        type: 'line', // 表示折线图
         smooth:true,
        symbol: 'none', // 表示线上的标志
        //每一项的样式
        itemStyle: {
          color: '#5470c6'
        },
        //折现使用的数据
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };
  myChart.setOption(option)
}

lineChart()

// -----------  3.柱状图 ------------------
function barChart(){
  let myChart = echarts.init($('.barChart')[0]);
  let option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式，axis表示轴触发，鼠标放到柱子上方即可触发；item表示每一项，鼠标放到每个柱子上才能触发
      axisPointer: {   // 坐标轴指示器配置项
        // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
        type: 'cross', 
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例
    legend: {},
    // X轴
    xAxis: [
      {
        type: 'category',
        data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
        axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
          type: 'shadow' // 4个柱子后的阴影
        }
      }
    ],
    // Y轴
    yAxis: [
      {
        type: 'value',
        min: 0, // y轴数据最小值
        max: 100, // y轴数据最大值
        interval: 10, // step步长，把y轴的数据分成多少份
        axisLabel: { // Y轴文字设置
          formatter: '{value}分', // Y轴文字
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    // 数据部分（4组数据）
    series: [
      {
        name: '平均分',
        type: 'bar',
        data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
        barWidth: '15',
      },
      {
        name: '低于60分人数',
        type: 'bar',
        data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
        barWidth: '15',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4]
      }
      ,
      {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
      }
    ]
  };
  myChart.setOption(option)
}

barChart();

// -----------  4.地图 ------------------

function mapChart(){
  let myChart = echarts.init($('.map')[0]);
  let option = {
    
  };
  myChart.setOption(option)
}
